import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment, { isDate } from 'moment';
import router from 'umi/router';
import classNames from 'classnames';
import { Modal, Row, Col, Card, Collapse, Table } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTable from '@/components/StandardTable';
import DetailsList from '@/components/DetailsList';
import styles from '@/pages/Detail.less';
import { formatFile } from '@/pages/Common/common';
import PaperInfo from './PaperInfo';
import FileReader from '@/components/FileReader';
import { formatCodeVal } from '@/pages/Common/common';
import { queryFileList } from '@/utils/common';

const Panel = Collapse.Panel;

@connect(({ tmsDriver, common, loading }) => ({
  tmsDriver,
  dictObject: common.dictObject,
  loading: loading.models.tmsDriver,
}))
class DriverTetails extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectedRowKeys: [],
      papersDetails: {},
      selectedPaperId: [],
      selectedRows: [],
      visible: false,
      previewVisible: false,
      previewImage: '',
      fileList: [],
      fileListFirst: [],
      activeKey: ['1', '2', , '3'],
      paperType: {},
      vehicleDriver: [],
      paperTypeHandle: '',
      deleteFileIds: [],
      address: {
        country: {},
        province: {},
        city: {},
        district: {},
      },
    };
  }

  componentDidMount() {
    const {
      tmsDriver: { selectDetails },
      checkId,
    } = this.props;
    //查询字典：证件类型
    // this.props.dispatch({
    //   type: 'common/querytDictByCode',
    //   payload: { code: 'papers-type' },
    // });
    // 查询字典：
    // 准驾车型
    this.queryFileList(checkId);
    this.props.dispatch({
      type: 'common/querytDictByCode',
      payload: { code: 'allow-vehicle-models' },
    });
    //关系：
    this.props.dispatch({
      type: 'common/querytDictByCode',
      payload: { code: 'driver-contact-re' },
    });
  }

  callback = key => {
    // console.log(key);
    this.setState({
      activeKey: key,
    });
  };

  handleCancel = e => {
    this.setState({
      previewVisible: false,
    });
  };

  queryFileList = id => {
    queryFileList({
      props: this.props,
      params: { bizId: id, fileBizType: 'DRIVER_PORTRAIT' },
      callback: data => {
        if (!data) return;
        this.setState({ fileList: data });
      },
    });
  };

  columns = [
    {
      title: '证件类型',
      dataIndex: 'type',
      fixed: this.props.isMobile ? false : true,
      width: this.props.isMobile ? 'auto' : 100,
    },
    {
      title: '证件号码',
      dataIndex: 'cardCode',
      fixed: this.props.isMobile ? false : true,
      width: this.props.isMobile ? 'auto' : 100,
    },
    {
      title: '有效期',
      dataIndex: 'expiryStartTime',
      render: (text, record) => (
        <span>
          {record.expiryStartTime} 至 {record.expiryEndTime}
        </span>
      ),
    },
    {
      title: '备注',
      dataIndex: 'remarks',
    },
    {
      title: '附件',
      dataIndex: 'attachments',
      render: (text, record) => formatFile(text),
    },
  ];

  render() {
    const {
      selectedRowKeys,
      selectedRows,
      visible,
      previewVisible,
      previewImage,
      fileList,
      papersDetails,
      vehicleDriver,
      fileListFirst,
    } = this.state;

    const {
      dictObject,
      loading,
      isMobile,
      tmsDriver: { selectDetails, papersList },
      checkId,
    } = this.props;

    let details = {};
    let papersListDetails = {};
    if (checkId) {
      details = selectDetails[checkId];
      papersListDetails = papersList[checkId];
    }
    const allowVehicleType = details
      ? formatCodeVal(dictObject['allow-vehicle-models'], details.allowVehicleType)
      : '';
    const relationCode =
      details && details.contact
        ? formatCodeVal(dictObject['driver-contact-re'], details.contact.relationCode)
        : '';

    const fields = [
      { key: 'name', name: '司机姓名' },
      { key: 'engName', name: '英文名' },
      { key: 'idCard', name: '身份证号' },
      { key: 'workerNo', name: '工号' },
      { key: 'mdsCompanyName', name: '公司' },
      { key: allowVehicleType, name: '准驾车型', isConst: true },
      { key: 'nativePlace', name: '籍贯' },
      { key: 'bankNo', name: '银行卡号' },
      { key: 'phoneNumOne', name: '联系电话1' },
      { key: 'phoneNumTwo', name: '联系电话2' },
      { key: 'wxNo', name: '微信号' },
      { key: 'email', name: '邮箱', isRow: true },
      { key: 'bankName', name: '开户行', isRow: true },
      { key: 'placeOfDomicile', name: '户籍所在地', isRow: true },
      {
        key: 'fullAddress',
        name: '联系地址',
        // keys: ['country', 'province', 'city', 'district'],
        isRow: true,
      },

      { key: 'linkAddress', name: '详细地址', isRow: true },
      { key: 'remarks', name: '备注', isRow: true },
      { key: 'headPortrait', name: '头像', isRow: true, isFile: fileList },
    ];
    const fieldsContact = [
      { key: 'emergencyContact', name: '紧急联系人' },
      { key: relationCode, name: '关系', isRow: true },
      { key: 'contactPhone', name: '联系电话' },
      { key: 'contactBankNo', name: '银行卡号' },
      { key: 'contactBankName', name: '开户行', isRow: true },
      {
        key: 'contactAddress',
        name: '联系地址',
        isRow: true,
        // keys: ['country', 'province', 'city', 'district'],
        isRow: true,
      },
      { key: 'linkAddress', name: '详细地址', isRow: true },
      { key: 'remarks', name: '备注', isRow: true },
    ];

    return (
      <div className={styles.CollapseDetails}>
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
        <Collapse
          activeKey={this.state.activeKey}
          onChange={key => this.callback(key)}
          bordered={false}
        >
          <Panel header="基础信息" key="1" className={styles.customPanelStyle}>
            <DetailsList
              isMobile={isMobile}
              detilsData={{
                fields: fields,
                value: details,
                fileList: this.state.fileListFirst,
              }}
            />
          </Panel>
          <Panel header="紧急联系人" key="2" className={styles.customPanelStyle}>
            <DetailsList
              isMobile={isMobile}
              detilsData={{
                fields: fieldsContact,
                value: details && details.contact,
              }}
            />
          </Panel>
          <Panel header="证件信息" key="3" className={styles.customPanelStyle}>
            <PaperInfo data={papersListDetails} />
          </Panel>
        </Collapse>
      </div>
    );
  }
}
export default DriverTetails;
